<!DOCTYPE html>
<html>
<head>
    <script src="js/rangy/rangy-core.min.js"></script>
    <script src="js/rangy/rangy-classapplier.min.js"></script>
    <script src="js/undo/undo.js"></script>
    <script src="js/medium/medium.min.js"></script>
    <link rel="stylesheet" href="css/medium.css" />
    <style type="text/css">
        .toolbar-top {
	        text-align: center;
	        margin-bottom: 10px;
	        margin-top: 10px;
        }
        .toolbar {
	        cursor: pointer;
	        border-bottom-left-radius: 5px;
	        border-top-left-radius: 5px;
	        border-bottom-right-radius: 5px;
	        border-top-right-radius: 5px;
	        background-color: #333332;
	        color: white;
	        -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.42);
	        -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.42);
	        box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.42);
        }
        .toolbar span {
	        padding: 5px;
	        margin: 0px;
        }
        
        .demo{
	        background-color: #F5F5F0;
	        -webkit-box-shadow: 0px 3px 15px 2px #F5F5F0;
	        -moz-box-shadow: 0px 3px 15px 2px #F5F5F0;
	        box-shadow: 0px 3px 15px 2px #F5F5F0;
	        padding: 10px;
            border-bottom: 1px dashed #ccc;
        }
        
        .article {
            min-height: 300px !important;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
   <div class="toolbar-top">
       <span class="toolbar">
           <span class="bold" style="font-weight: bold; color: #66d9ef">B</span>
           <span class="underline" style="text-decoration: underline; color: #a6e22e">U</span>
           <span class="italic" style="font-style: italic; color: #f92672">I</span>
           <span class="strike" style="text-decoration: line-through; color: #e6db74">S</span>
           <span class="save" style="color: #fa1">Save</span>
       </span>
   </div>
    <div id="editor" class="article demo"></div>
    
    <script>
        var article = document.getElementById('editor')
            container = article.parentNode,
            medium = new Medium({
	            element: article,
	            modifier: 'auto',
	            placeholder: "write your mind here",
	            autofocus: false,
	            autoHR: true,
	            mode: Medium.richMode,
	            maxLength: -1,
	            modifiers: {
		            'b': 'bold',
		            'i': 'italicize',
		            'u': 'underline',
		            'v': 'paste'
	            },
	            tags: {
		            'break': 'br',
		            'horizontalRule': 'hr',
		            'paragraph': 'p',
		            'outerLevel': ['pre', 'blockquote', 'figure'],
		            'innerLevel': ['a', 'b', 'u', 'i' , 'strike', 'img', 'strong']
	            },
	            cssClasses: {
		            editor: 'Medium',
		            pasteHook: 'Medium-paste-hook',
		            placeholder: 'Medium-placeholder',
		            clear: 'Medium-clear'
	            },
	            attributes: {
		            remove: ['style', 'class']
	            },
	            pasteAsText: true,
	            beforeInvokeElement: function () {
		            //this = Medium.Element
	            },
	            beforeInsertHtml: function () {
		            //this = Medium.Html
	            },
	            beforeAddTag: function (tag, shouldFocus, isEditable, afterElement) {
	            },
	            keyContext: null,
	            pasteEventHandler: function(e) {
		            /*default paste event handler*/
	            }
            });
            
        article.highlight = function() {
		    if (document.activeElement !== article) {
			    medium.select();
		    }
	    };
	    
	    container.querySelector('.bold').onmousedown = function() {
		    article.highlight();
		    medium.invokeElement('b', {
		        title: "I'm bold!",
		        style: "color: #66d9ef"
	        });
		    return false;
	    };

	    container.querySelector('.underline').onmousedown = function() {
		    article.highlight();
		    medium.invokeElement('u', {
			    title: "I'm underlined!",
			    style: "color: #a6e22e"
		    });
		    return false;
	    };

	    container.querySelector('.italic').onmousedown = function() {
		    article.highlight();
		    medium.invokeElement('i', {
			    title: "I'm italics!",
			    style: "color: #f92672"
		    });
		    return false;
	    };

	    container.querySelector('.strike').onmousedown = function() {
		    article.highlight();
		    medium.invokeElement('strike', {
			    title: "I've been struck!",
			    style: "color: #e6db74"
		    });
		    return false;
	    };
	    
	    container.querySelector('.save').onmousedown = function() {
		    article.highlight();
		    var val = medium.value();
		    console.log(val);
		    return false;
	    };
    </script>
</body>
</html>
